import { useSttingStore } from '@/stores/settings'
import { generateColors, setColors } from '@/utils/color'
export const useGenerateTheme = () => {
  const store = useSttingStore()
  const theme = computed(() => store.settings.theme)

  const originalTheme = computed(() => store.settings.originalTheme)

  watchEffect(() => {
    if (theme.value !== originalTheme.value) {
      const colors = {
        primary: theme.value,
        ...generateColors(theme.value)
      }

      setColors(colors)
      store.changeSetting({
        key: 'originalTheme',
        value: theme.value
      })
    }
  })
}
